import { Avatar, Col, Flex, Layout, Row, Space, Switch, theme } from 'antd';
import React from 'react';
import style from './index.less';
import { MenuFoldOutlined } from '@ant-design/icons';
import { useAntdConfig, useModel } from '@umijs/max';
import Breadcrumb from '@/layouts/components/Breadcrumb';
import {AvatarDropdown, AvatarName, FullScreen, SelectLang, Theme} from '@/components';
import Wrapper from '@/layouts/components/Header/Wrapper';


const { Header } = Layout;

export default (props: any) => {
    const { onCollapse, width } = props;
    const { initialState } = useModel('@@initialState');

    return (
        <Header
            className={style.header}
            style={{
                background: initialState?.settings?.navTheme === 'realDark' ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.6)',
                backdropFilter: 'blur(8px)',
                position: 'fixed',
                width: `${width}`,
                top: 0,
                padding: '0 0 0 16px',
                height: initialState?.settings?.headerHeight || 56,
            }}
        >
            <div
                style={{
                    // position: 'absolute',
                    left: 0,
                    display: 'flex',
                    float: 'left',
                    alignItems: 'center',
                }}
            >
                <Wrapper>
                    <MenuFoldOutlined style={{ fontSize: 16 }} onClick={onCollapse} />
                </Wrapper>

                <Breadcrumb />
            </div>
            <div
                style={{
                    position: 'absolute',
                    right: '24px',
                    display: 'flex',
                    alignItems: 'center',
                }}
            >
                <Wrapper>
                    <FullScreen />
                </Wrapper>
                <Wrapper>
                    <SelectLang />
                </Wrapper>
                <Wrapper>
                    <Theme/>
                </Wrapper>
                <AvatarDropdown menu={true}>
                    <div>
                    <Wrapper>
                        <AvatarName />
                    </Wrapper>
                    </div>
                </AvatarDropdown>
            </div>
        </Header>
    );
};
